<template>
	<view class="content">
		<view class="order_one">
			<view class="order_one_left">
				<view class="order_one_xz">
					<view class="unpaid_sec">
						<image :src="size? '../../../static/images/a9.png':'../../../static/images/a10.png'" @click="listDate" mode=""></image>
					</view>
					<view class="">
						<image src="../../../static/images/a7.png" mode=""></image>
					</view>
				</view>
				<view class="order_one_text">
					<view class="order_ones">
						<text>马来西亚猫山王榴莲1个装</text>
						<text class="price">￥269</text>
					</view>
					<view class="order_ones">
						<text class="gg">规格：1.8-2.2kg（液氮冷冻）</text>
						<text class="gg">X2</text>
					</view>
				</view>
			</view>
			<view class="order_one_left">
				<view class="order_one_xz">
					<view class="unpaid_sec">
						<image :src="size0? '../../../static/images/a9.png':'../../../static/images/a10.png'" @click="showSize" mode=""></image>
					</view>
					<view class="">

					</view>
				</view>
				<image src="../../../static/images/a7.png" mode=""></image>
				<view class="order_one_text">
					<view class="order_ones">
						<text>马来西亚猫山王榴莲1个装</text>
						<text class="price">￥269</text>
					</view>
					<view class="order_ones">
						<text class="gg">规格：1.8-2.2kg（液氮冷冻）</text>
						<text class="gg">X2</text>
					</view>
				</view>
			</view>
			<view class="order_one_item">
				<view class="order_one_yf">
					<text>运费</text>
					<text class="gg">￥0.00</text>
				</view>
				<view class="order_one_yf">
					<text>备注</text>
					<text class="gg">无</text>
				</view>
			</view>
			<view class="order_one_sh">
				<view class="order_sh">
					<image :src="size1? '../../../static/images/a9.png':'../../../static/images/a10.png'" @click="change" mode=""></image>
					<text>全选</text>
				</view>
				<view class="order_qrs">
					<text>共计3件</text>
					<text class="zj"><text class="hj">退款金额</text>￥567.9</text>
				</view>
			</view>
		</view>
		<view class="refund">
			<view class="refund_item">
				<text>退款原因</text>
				<view class="refund_item_xz">
					<text style="color: #FCBB21;">(必选)</text>
					<text  @tap="show">请选择</text>
					<image src="../../../static/images/s54.png" mode=""></image>
				</view>
			</view>
			<view class="textarea_box">
				<textarea class="textarea" placeholder="补充详细退款原因，有利于商家更快的帮您处理" maxlength="200" @input="descInput" v-model="desc" />
				<view class="num">{{ desc.length }}/200</view>
			</view>
			<view class="sctp">
				<view>
					<text>最多上传三张</text>
				</view>
				<!-- <view class="sctp_img">
					<image  src="../../../static/images/a11.png" mode=""></image>
				</view> -->
				<view class="add-img-box">
					<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
						<image class="add-img" @click="imgInfo(index)" :src="item.path" mode="aspectFill"></image>
						<!-- <image  class="add-img-del" @click="delImg(index)" src="../../static/delete.png"></image> -->
					</view>
					<view v-if="imgList.length < 3 " class="add-img-item" @click="openCamera">
						<image class="add-img" src="../../../static/images/a11.png"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="tijiao">
			<view class="tijiao_item">
				<text>退款金额￥29.9</text>
				<text>退款至您的支付账户</text>
			</view>
			<view class="tijiao_tj"  @click="receipt">
				<text>提交</text>
			</view>
		</view>
		<popup-layer class="tk" ref="popupRef" :direction="'top'">
			<!-- 弹框内容 -->
			<view class="qx">
				<text>请选择真实原因，以免影响退款结果</text>
				<image src="../../../static/images/a12.png" mode=""  @tap="close"></image>
			</view>
			<view class="refund_yy">
				<text @click="tk">商家通知我卖完了</text>
				<text @click="tk">商家通知我卖完了</text>
				<text @click="tk">商家通知我卖完了</text>
			</view>
		</popup-layer>
	</view>
</template>

<script>
	import popupLayer from '../../../components/popup-layer/popup-layer.vue';
	export default {
		 components:{
		     popupLayer
		 },
		data() {
			return {
				size: false,
				size0: false,
				size1:false,
				boolShow:true,//弹框
				index :0,
				desc: '', //监听文本域的字数
				imgList: [],
				cloudimgList: [],
				imgCount: 3,//最多支持9张上传，可以修改
			};
		},
		methods:{
			descInput(e) {
				this.remnant = e.detail.value.length;
			},
			listDate() {
				this.size = !this.size
			},
			showSize() {
				this.size0 = !this.size0
			},
			//全选
			change() {
				this.size1 = !this.size1
			},
			  show(){
			     this.$refs.popupRef.show(); // 或者 boolShow = rue
			},
			close(){
			    this.$refs.popupRef.close();// 或者 boolShow = false
			},
			receipt() {
				uni.showModal({
					content: '提交成功，请耐心等候',
					 showCancel: false,
					          buttonText: '确定',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} 
					}
				})
			},
					
			// 选择退款理由
			// tk(index){
			// 	this.index = index
			// 	alert(index)
			// },
			//上传图片
		// 	submit(e) {
		// 		this.submitData = null;
		// 		if (this.imgList.length < 1) {
		// 			uni.showToast({
		// 				title: '请添加图片',
		// 				icon: 'none'
		// 			});
		// 			return false;
		// 		}
		// 		uni.showLoading({
		// 			title: '上传图片',
		// 			mask: false
		// 		});
		// 		for (let i = 0; i < this.imgList.length; i++) {
		// 			console.log("test！"+this.imgList[i].path);			
		// 			this.$cloud.uploadFile({
		// 				filePath: this.imgList[i].path,
		// 				success: (res) => {
		// 					//保存图片的路径
		// 					this.cloudimgList.push(res.fileID);
		// 				},
		// 				fail: (err) => {
		// 					console.log(err);
		// 				},
		// 				complete: () => {
		// 					//uni.hideLoading();
		// 					if (this.cloudimgList.length == this.imgList.length) {
		// 						uni.hideLoading();
		// 						uni.showToast({
		// 							title: '全部上传成功！',
		// 							icon: 'none'
		// 						});
		// 					}
		// 				}
		// 			})
		// 			}
		// 	},
			imgInfo(i) {
				let tempList = [];
				this.imgList.forEach(img => {
					tempList.push(img.path);
				});
				console.log(tempList);
				//显示图片
				uni.previewImage({
					current: i,
					loop: false,
					urls: tempList,
					indicator: 'default'
				});
			},
			delImg(i) {
				uni.showModal({
					content: '确定删除这张吗',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(i, 1);
							this.imgCount++;
						} else if (res.cancel) {
							
						}
					}
				});
			},
			delcloudImg(i) {
				var _self = this;
				uni.showModal({
					content: '确定删除云服务器上面这张图吗',
					success: res => {
						if (res.confirm) {
							this.$cloud.deleteFile(
							  {
							    fileList: [this.cloudimgList[i]],
							    success(res){	
								},
							    fail(err){
									console.log(err);								
								},
							    complete(res){
									uni.showToast({
										title: '删除成功！',
										icon: 'none'
									});
									_self.cloudimgList.splice(i, 1);
								}							
							  }					  
							);					
						} else if (res.cancel) {
							
						}
					}
				});
			},
			openCamera() {
				uni.chooseImage({
					sourceType:['camera'],
					count: this.imgCount,
					sizeType: ['compressed'],
					success: e => {
						this.imgList = [...this.imgList, ...e.tempFiles];
			
						this.imgCount = 9 - this.imgList.length;
						console.log('imgCount', this.imgCount);
					}
				});
			},
			
		}
	
	}
</script>

<style lang="scss">
	.content{
		background: #f5f5f5;
		height: 100%;
		.order_one {
			margin: 20rpx;
			background: #fff;
			border-radius: 15rpx;
			.order_one_left {
				display: flex;
				padding: 20rpx;
				.order_one_xz{
					display: flex;
					align-items: center;
				}
				image {
					width: 128rpx;
					height: 128rpx;
				}
				.unpaid_sec{
					image{
						width: 32rpx;
						height: 32rpx;
						align-items: center;
					}
				}
				.order_one_text {
					width: 80%;
		
					font-size: 24rpx;
					color: #212121;
					font-weight: 400;
					font-family: PingFang SC;
		
					text {
						display: block;
					}
		
					.order_ones {
						display: flex;
						justify-content: space-between;
						width: 100%;
						padding-bottom: 20rpx;
					}
		
					.price {
						color: red;
					}
		
					.gg {
						color: #BDBDBD;
						font-size: 20rpx;
					}
				}
			}
		
			.order_one_yf {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 20rpx 10rpx 20rpx;
		
				text {
					font-size: 20rpx;
				}
		
				.gg {
					color: #BDBDBD;
				}
			}
		
			.order_one_sh {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 20rpx 10rpx 20rpx;
				align-items: center;
				.order_sh {
					display: flex;
					align-items: center;
					text {
						color:#212121;
						font-size: 24rpx;
						padding-left: 20rpx;
					}
					image{
						width: 32rpx;
						height: 32rpx;
					}
				}
		
				.order_qrs {
					text {
						color: #BDBDBD;
					}
		
					.zj {
						padding-left: 10rpx;
						font-size: 28rpx;
						color: red;
		
						.hj {
							font-size: 28rpx;
							color: #212121;
						}
					}
				}
		
				text {
					font-size: 24rpx;
				}
			}
		}
		.refund{
			background: #fff;
			margin: 20rpx;
			text{
				font-size: 28rpx;
			}
			.textarea_box{
				background: #F5F5F5;
				margin: 20rpx;
				padding: 20rpx;
				border-radius: 15rpx;
				height: 200rpx;
				textarea{
					font-size: 20rpx;
					height: 200rpx;
					color: #BDBDBD;
				}
				.num{
					font-size: 20rpx;
					color: #BDBDBD;
					text-align: right;
					margin-top: -20rpx;
				}
			}
			.refund_item{
				display: flex;
				align-items: center;
				padding: 20rpx;
				justify-content: space-between;
				.refund_item_xz{
					text{
						color: #BDBDBD;
						font-size: 20rpx;
						margin-right: 20rpx;
					}
					image{
						width: 14rpx;
						height: 24rpx;
					}
				}
			}
			.sctp{
				padding: 20rpx;
				.add-img-box{
					display: flex;
					align-items: center;
				}
				image{
					width: 100rpx;
					height: 100rpx;
					padding-top: 20rpx;
				}
				text{
					display: block;
					font-size: 20rpx;
					color: #BDBDBD;
					
				}
			}
		}	
	
		.tijiao{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			.tijiao_item{
				background: #000;
				width: 80%;
				padding: 10rpx 40rpx;
				border-radius: 88rpx 0 0 88rpx;
				text{
					display: block;
					font-size: 20rpx;
					color: #fff;
				}
			}
			.tijiao_tj{
				background: #8BDD8E;
				width: 20%;
				font-size: 28rpx;
				color: #fff;
				height: 85rpx;
				padding: 0rpx 72rpx;
				line-height: 85rpx;
				text-align: center;
				border-radius: 0 88rpx 88rpx 0;
			}
		}
		.qx{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			text{
				font-size: 24rpx;
			}
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.refund_yy{
			text{
				display: block;
				font-size: 20rpx;
				color: #9E9E9E;
				line-height: 28rpx;
				padding: 10rpx 20rpx;
			}
		}
	}
</style>
